<template>
  <div class="all labelSetting scroolBar " style="overflow-y: auto;">
    <!-- 筛选组件-->
    <div>
      <el-button type="primary" @click="openDialog"> 新增标签</el-button>
    </div>
    <!-- 表格组件-->
    <div>
      <myTable :tabelHeader="tableHeader" :tableData="labelSettingList" @tableCellClick="onMoudelMsg"></myTable>
    </div>
    <!-- 分页组件 -->
    <div class="workCenterRig">
      <table-paper :currPageNum="pageNum" :PagerOrder="PagerOrder"  @tablePaperEven="onMoudelMsg" ></table-paper>
    </div>

    <!-- 对话框组件-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      @close="handleClose">
      <div class="w90">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="标签名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmDialog">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import {
    getGameLabelSet,
    postAddLabelSet,
    getLabelSetInfo,
    deleteLabelSet,
    putRefleshLabelSet
  } from './api'
  import myTable from './../../components/yqq/table'
  import tablePaper from '../../components/yqq/tablePaper'
  import Cookies from 'js-cookie'
  var  adminName=Cookies.get('adminName')
  var  token=Cookies.get('token')
  export default {
    name: "labelSetting",
    components: {
      "myTable":myTable,
      tablePaper,
    },

    data(){
      return{
        form:{
          name:'',//区服名称
        },
        dialogVisible:false,//对话框展示
        title:"提示", //对话框标题
        pageNum:1,//页码
        pageSize:10,//个数
        PagerOrder:{
          count:0,
        },
        labelSettingList:[],//游戏区服列表
        // gameList:[],//获取区服列表
        //表头数据
        tableHeader:[{
          type:'text',
          key:'name',
          value:'标签名称',
        },
          {
            type: 'button',
            key: 'primary',
            // width: '180',
            value: '操作',
            btnLis:[
              {
                name:'编辑',
                judeKey:'primary',
                judeValue:'primary',
                type:'edit',
                btntype:'primary',
              },
              {
                name:'删除',
                judeKey:'primary',
                judeValue:'primary',
                type:'delete',
                btntype:'danger',
              }
            ]}],
      }
    },
    created() {
      this.getGameLabelSet()
    },
    methods:{
      //获取游戏区服列表
      getGameLabelSet(){
        var getObj = {
          pageNum:this.pageNum,
          pageSize:this.pageSize
        }
        getGameLabelSet(getObj).then(res=>{
          // console.log("获取游戏列表",res)
          if (res.code==0){
            var vdata = res.data.list
            vdata.forEach((items,i)=>{
              items.primary = 'primary' //按钮默认显示
            })
            this.labelSettingList = vdata
            this.PagerOrder={
              count:res.data.total,
              size:this.pageSize
            }
          }
        }).catch(err=>{
          // console.log(err)
        })
      },
      //新增对话框
      openDialog(){
        this.title="新增标签"
        this.dialogVisible=true
      },
      //表格组件事件
      onMoudelMsg(data){
        // console.log(data)
        let btnType = data.type
        let itemData = data.data

        if (btnType=="edit"){
          this.title="编辑标签"
          this.dialogVisible=true
          this.form={
            name:itemData.name, // |gameName |string |游戏名称 |
            labelId:itemData.labelId
          }
        }

        if(btnType == 'paperNumChange'){
          this.pageNum = itemData
          this.getGameLabelSet()
        }

        if(btnType == 'delete'){
          this.$confirmMsg("确定删除吗？",'','',()=>{
            deleteLabelSet({labelId:itemData.labelId}) .then((res)=>{
              if (res.code==0){
                this.$notifyMsg("提示","删除成功！","success")
                this.getGameLabelSet()
              }else {
                this.$notifyMsg("提示","删除失败!","error")
              }
            })
          },()=>{},)

        }
      },
      //对话框关闭
      handleClose(){
        this.form={
          name:'', // |gameName |string |游戏名称 |
        }
      },
      //对话框确认
      confirmDialog(){

        if (!!!this.form.name){
          this.$notifyMsg("警告","标签名称不可为空!","error")
          return
        }

        if(this.form.hasOwnProperty("labelId")){
          putRefleshLabelSet(this.form).then(res=>{
            // console.log(res)
            if (res.code==0){
              this.$notifyMsg("提示","更新成功","success")
              this.getGameLabelSet()
            }
            this.dialogVisible=false
          })
        } else {
          postAddLabelSet(this.form).then(res=>{
            // console.log(res)
            if (res.code==0){
              this.$notifyMsg("提示","新增成功","success")
              this.getGameLabelSet()
            }
            this.dialogVisible=false
          })
        }



      },
    },
  }
</script>

<style scoped>
  .labelSetting .el-input { width:auto;}
  .labelSetting .el-input-number{width: auto}
  .labelSetting::-webkit-scrollbar {
    display: block;
  }
  .labelSetting .avatar-uploader .el-upload {
    border: 1px dashed lightgray;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .labelSetting .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .labelSetting .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .labelSetting .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
